import React from "react";
import {inject,observer} from "mobx-react";
import {Menu} from 'antd';
import {Link} from "react-router-dom"
import { UserOutlined } from '@ant-design/icons';
const { SubMenu } = Menu;

@inject("user")
@observer

class LeftMenu extends React.Component{
    //在本组件里使用值需要
    constructor() {
        super();
        this.state={
            menuList:[]
        }
    }
    //生成菜单，根据传递的数组，生成菜单
    bindMenu(list){
        let menuList = list.map((item,index)=>{
            //判断是否有子菜单，有子菜单，直接写submenu，没有子菜单，则menu.item
            if(item.menuChilds.length === 0){
                return <Menu.Item key={item.menuId}>
                    <Link to={item.menuUrl}>{item.menuName}</Link>
                </Menu.Item>
            }else{
                return (<SubMenu key={item.menuId} icon={<UserOutlined />} title={item.menuName}>
                        {this.bindMenu(item.menuChilds)}
                </SubMenu>
                    )
            }
        });
        return menuList;
    }
    componentDidMount() {
        let menuList = this.props.user.user.data.menuInfo;
        let menuHtml = this.bindMenu(menuList);
        this.setState({
            menuList: menuHtml
        })
    }

    render()
    {
        return(
            <div>
                <Menu
                    mode="inline"
                    defaultSelectedKeys={['1']}
                    defaultOpenKeys={['sub1']}
                    style={{ height: '100%', borderRight: 0 }}
                >
                    {this.state.menuList}
                </Menu>
            </div>
        )
    }
}
export {LeftMenu as default}